<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
</html>
<head>
  <title>Samples of pagination styling for will_paginate</title>
  <link href='pagination.css' rel='stylesheet' type='text/css' />
  <style type='text/css'>
    html {
      margin: 0;
      padding: 0;
      background: #999;
      font: normal 76% "Lucida Grande", Verdana, Helvetica, sans-serif; }
    
    body {
      margin: 2em;
      padding: 2em;
      border: 2px solid gray;
      background: white;
      color: #222; }
    
    h1 {
      font-size: 2em;
      font-weight: normal;
      margin: 0 0 1em 0; }
    
    h2 {
      font-size: 1.4em;
      margin: 1em 0 .5em 0; }
    
    pre {
      font-size: 13px;
      font-family: Monaco, "DejaVu Sans Mono", "Bitstream Vera Mono", "Courier New", monospace; }
  </style>
</head>
<body>
  <h1>Samples of pagination styling for will_paginate</h1>
  <p>
    Find these styles in <b>"examples/pagination.css"</b> of <i>will_paginate</i> library.
    There is a Sass version of it for all you sassy people.
  </p>
  <p>
    Read about good rules for pagination:
    <a href='http://kurafire.net/log/archive/2007/06/22/pagination-101'>Pagination 101</a>
  </p>
  <p>
    <em>Warning:</em>
    page links below don't lead anywhere (so don't click on them).
  </p>
  <h2>
    Unstyled pagination <span style="font-weight:normal">(<i>ewww!</i>)</span>
  </h2>
  <div>
    <span class="disabled prev_page">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
  </div>
  <h2>Digg.com</h2>
  <div class='digg_pagination'>
    <span class="disabled prev_page">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
  </div>
  <h2>Digg-style, no page links</h2>
  <div class='digg_pagination'>
    <span class="disabled prev_page">&laquo; Previous</span>  <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
  </div>
  <p>Code that renders this:</p>
  <pre>
    <code>&lt;%= will_paginate @posts, :page_links =&gt; false %&gt;</code>
  </pre>
  <h2>Digg-style, extra content</h2>
  <div class='digg_pagination'>
    <div class='page_info'>
      Displaying entries <b>1&nbsp;-&nbsp;6</b> of <b>180</b> in total
    </div>
    <span class="disabled prev_page">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
  </div>
  <p>Code that renders this:</p>
  <pre>
    <code>&lt;div class="digg_pagination"&gt;
      &lt;div clas="page_info"&gt;
        &lt;%= page_entries_info @posts %&gt;
      &lt;/div&gt;
      &lt;%= will_paginate @posts, :container =&gt; false %&gt;
    &lt;/div&gt;</code>
  </pre>
  <h2>Apple.com store</h2>
  <div class='apple_pagination'>
    <span class="disabled prev_page">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
  </div>
  <h2>Flickr.com</h2>
  <div class='flickr_pagination'>
    <span class="disabled prev_page">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <a href="./?page=4">4</a> <a href="./?page=5">5</a> <a href="./?page=6">6</a> <a href="./?page=7">7</a> <a href="./?page=8">8</a> <a href="./?page=9">9</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a>
    <div class='page_info'>(118 photos)</div>
  </div>
</body>
